<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>红包详情 - 社交红包</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    :root {
      --red-primary: #E63946;
      --red-light: #FFE5E7;
      --red-dark: #C1121F;
      --gold: #FFD700;
      --gold-light: #FFF3CD;
      --gray: #6C757D;
      --light-bg: #F8F9FA;
      --white: #FFFFFF;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: var(--light-bg);
      color: #333;
      padding-top: 56px;
      padding-bottom: 70px;
    }
    
    /* 顶部导航 */
    .navbar {
      background-color: var(--red-primary);
      color: white;
      box-shadow: 0 2px 10px rgba(230, 57, 70, 0.3);
    }
    
    .navbar-brand, .nav-link {
      color: white !important;
    }
    
    .navbar-toggler {
      border-color: rgba(255, 255, 255, 0.3);
    }
    
    .navbar-toggler-icon {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }
    
    /* 红包容器 */
    .redpack-container {
      padding: 15px;
    }
    
    /* 红包发送者信息 */
    .sender-info {
      display: flex;
      align-items: center;
      padding: 15px;
      background-color: var(--white);
      border-radius: 12px;
      margin-bottom: 15px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    
    .sender-avatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      margin-right: 15px;
      object-fit: cover;
    }
    
    .sender-details {
      flex: 1;
    }
    
    .sender-name {
      font-weight: 600;
      font-size: 17px;
      margin-bottom: 3px;
    }
    
    .sender-time {
      font-size: 13px;
      color: var(--gray);
    }
    
    /* 红包详情样式 */
    .redpack-detail {
      background: linear-gradient(135deg, #FF5252, var(--red-primary));
      color: white;
      border-radius: 12px;
      overflow: hidden;
      margin-bottom: 15px;
      box-shadow: 0 4px 15px rgba(230, 57, 70, 0.2);
    }
    
    .redpack-message {
      padding: 20px 15px;
      text-align: center;
      font-size: 18px;
      font-weight: 500;
      border-bottom: 1px dashed rgba(255, 255, 255, 0.3);
    }
    
    .redpack-amount {
      padding: 25px 15px;
      text-align: center;
    }
    
    .amount-value {
      font-size: 36px;
      font-weight: 700;
      margin-bottom: 10px;
    }
    
    .amount-desc {
      font-size: 14px;
      opacity: 0.9;
    }
    
    .redpack-actions {
      display: flex;
      background-color: rgba(255, 255, 255, 0.15);
    }
    
    .redpack-btn {
      flex: 1;
      padding: 12px 0;
      border: none;
      background: none;
      color: white;
      font-size: 15px;
      font-weight: 500;
      border-right: 1px solid rgba(255, 255, 255, 0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
    }
    
    .redpack-btn:last-child {
      border-right: none;
    }
    
    /* 红包状态信息 */
    .redpack-status {
      background-color: var(--white);
      border-radius: 12px;
      padding: 15px;
      margin-bottom: 15px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    
    .status-title {
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--red-primary);
    }
    
    .status-stats {
      display: flex;
      justify-content: space-around;
      text-align: center;
      margin-bottom: 15px;
    }
    
    .stat-item {
      flex: 1;
    }
    
    .stat-value {
      font-size: 18px;
      font-weight: 700;
      margin-bottom: 3px;
    }
    
    .stat-label {
      font-size: 12px;
      color: var(--gray);
    }
    
    .status-bar {
      height: 8px;
      background-color: #eee;
      border-radius: 4px;
      overflow: hidden;
      margin-bottom: 8px;
    }
    
    .progress-bar {
      height: 100%;
      background-color: var(--gold);
      border-radius: 4px;
    }
    
    .status-text {
      font-size: 13px;
      color: var(--gray);
      text-align: right;
    }
    
    /* 领取列表 */
    .recipients-list {
      background-color: var(--white);
      border-radius: 12px;
      margin-bottom: 15px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
      overflow: hidden;
    }
    
    .list-header {
      padding: 12px 15px;
      font-weight: 600;
      border-bottom: 1px solid #eee;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .sort-btn {
      font-size: 13px;
      color: var(--red-primary);
      background: none;
      border: none;
      display: flex;
      align-items: center;
      gap: 3px;
    }
    
    .recipient-item {
      padding: 12px 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #eee;
    }
    
    .recipient-item:last-child {
      border-bottom: none;
    }
    
    .recipient-info {
      display: flex;
      align-items: center;
    }
    
    .recipient-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-right: 12px;
      object-fit: cover;
    }
    
    .recipient-name {
      font-size: 15px;
    }
    
    .recipient-time {
      font-size: 12px;
      color: var(--gray);
    }
    
    .recipient-amount {
      font-weight: 600;
      color: var(--red-primary);
    }
    
    .recipient-lucky {
      display: inline-block;
      background-color: var(--gold-light);
      color: #856404;
      font-size: 10px;
      padding: 1px 6px;
      border-radius: 4px;
      margin-left: 5px;
    }
    
    /* 留言区 */
    .comments-section {
      background-color: var(--white);
      border-radius: 12px;
      padding: 15px;
      margin-bottom: 15px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    
    .comments-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
    }
    
    .comments-title {
      font-size: 16px;
      font-weight: 600;
    }
    
    .comments-count {
      color: var(--gray);
      font-size: 14px;
    }
    
    .comment-item {
      margin-bottom: 15px;
      padding-bottom: 15px;
      border-bottom: 1px solid #eee;
    }
    
    .comment-item:last-child {
      margin-bottom: 0;
      padding-bottom: 0;
      border-bottom: none;
    }
    
    .comment-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;
    }
    
    .comment-author {
      display: flex;
      align-items: center;
    }
    
    .author-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      margin-right: 10px;
      object-fit: cover;
    }
    
    .author-name {
      font-weight: 500;
      font-size: 14px;
    }
    
    .comment-time {
      font-size: 12px;
      color: var(--gray);
    }
    
    .comment-content {
      font-size: 14px;
      margin-bottom: 8px;
      padding-left: 46px;
    }
    
    .comment-actions {
      display: flex;
      gap: 15px;
      padding-left: 46px;
    }
    
    .comment-action {
      font-size: 12px;
      color: var(--gray);
      display: flex;
      align-items: center;
      gap: 3px;
      cursor: pointer;
    }
    
    .comment-action:hover {
      color: var(--red-primary);
    }
    
    /* 回复样式 */
    .replies {
      margin-left: 20px;
      padding-left: 26px;
      border-left: 1px dashed #eee;
      margin-top: 10px;
    }
    
    .reply-item {
      margin-bottom: 10px;
      padding-bottom: 10px;
      border-bottom: 1px solid #f5f5f5;
    }
    
    .reply-item:last-child {
      margin-bottom: 0;
      padding-bottom: 0;
      border-bottom: none;
    }
    
    .reply-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 5px;
    }
    
    .reply-author {
      font-weight: 500;
      font-size: 13px;
    }
    
    .reply-to {
      color: var(--gray);
      font-size: 13px;
    }
    
    .reply-time {
      font-size: 11px;
      color: var(--gray);
    }
    
    .reply-content {
      font-size: 13px;
      margin-bottom: 5px;
    }
    
    /* 留言输入框 */
    .comment-input {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: var(--white);
      padding: 10px 15px;
      border-top: 1px solid #eee;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .input-actions {
      display: flex;
      gap: 10px;
    }
    
    .input-action {
      color: var(--gray);
      font-size: 20px;
    }
    
    .comment-textarea {
      flex: 1;
      border: 1px solid #ddd;
      border-radius: 20px;
      padding: 8px 15px;
      font-size: 14px;
      resize: none;
      height: 38px;
      overflow: hidden;
    }
    
    .send-btn {
      background-color: var(--red-primary);
      color: white;
      border: none;
      border-radius: 20px;
      padding: 8px 15px;
      font-size: 14px;
      font-weight: 500;
    }
    
    /* 动画效果 */
    @keyframes pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.05); }
      100% { transform: scale(1); }
    }
    
    .redpack-detail.unopened {
      animation: pulse 2s infinite;
    }
    
    /* 已领取红包样式 */
    .received-redpack {
      background: linear-gradient(135deg, #f8f9fa, #e9ecef);
      color: #333;
    }
    
    .received-redpack .redpack-actions {
      background-color: rgba(0,0,0,0.05);
    }
    
    .received-redpack .redpack-btn {
      color: #333;
      border-right: 1px solid rgba(0,0,0,0.08);
    }
    
    .received-amount {
      color: var(--red-primary);
    }
  </style>
</head>
<body>
  <!-- 顶部导航 -->
  <nav class="navbar navbar-light fixed-top">
    <div class="container px-3">
      <a class="navbar-brand" href="#" style="display: flex; align-items: center;">
        <i class="fa fa-arrow-left me-2"></i>
        <span>红包详情</span>
      </a>
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">
            <i class="fa fa-share-alt"></i>
          </a>
        </li>
      </ul>
    </div>
  </nav>
  
  <div class="redpack-container">
    <!-- 红包发送者信息 -->
    <div class="sender-info">
      <img src="https://picsum.photos/100/100?random=1" alt="发送者头像" class="sender-avatar">
      <div class="sender-details">
        <div class="sender-name">公司年会红包</div>
        <div class="sender-time">今天 15:30 发送 · 拼手气红包</div>
      </div>
    </div>
    
    <!-- 红包详情 -->
    <div class="redpack-detail unopened">
      <div class="redpack-message">恭喜发财，大吉大利！祝大家新年新气象，工作顺利！</div>
      <div class="redpack-amount">
        <div class="amount-value">点击领取</div>
        <div class="amount-desc">20个红包 · 总金额 ¥888.00</div>
      </div>
      <div class="redpack-actions">
        <button class="redpack-btn">
          <i class="fa fa-heart-o"></i> 收藏
        </button>
        <button class="redpack-btn">
          <i class="fa fa-comment-o"></i> 留言
        </button>
        <button class="redpack-btn">
          <i class="fa fa-share-alt"></i> 分享
        </button>
      </div>
    </div>
    
    <!-- 红包状态信息 -->
    <div class="redpack-status">
      <div class="status-title">
        <i class="fa fa-trophy"></i> 红包领取进度
      </div>
      <div class="status-stats">
        <div class="stat-item">
          <div class="stat-value">12/20</div>
          <div class="stat-label">已领取</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">¥456.80</div>
          <div class="stat-label">已领取金额</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">¥44.40</div>
          <div class="stat-label">平均金额</div>
        </div>
      </div>
      <div class="status-bar">
        <div class="progress-bar" style="width: 60%;"></div>
      </div>
      <div class="status-text">剩余8个红包 · 2小时后过期</div>
    </div>
    
    <!-- 领取列表 -->
    <div class="recipients-list">
      <div class="list-header">
        <span>领取列表</span>
        <button class="sort-btn">
          <span>金额排序</span>
          <i class="fa fa-chevron-down"></i>
        </button>
      </div>
      
      <div class="recipient-item">
        <div class="recipient-info">
          <img src="https://picsum.photos/100/100?random=10" alt="领取者头像" class="recipient-avatar">
          <div>
            <div class="recipient-name">
              张经理 <span class="recipient-lucky">手气最佳</span>
            </div>
            <div class="recipient-time">15:31 领取</div>
          </div>
        </div>
        <div class="recipient-amount">¥88.88</div>
      </div>
      
      <div class="recipient-item">
        <div class="recipient-info">
          <img src="https://picsum.photos/100/100?random=11" alt="领取者头像" class="recipient-avatar">
          <div>
            <div class="recipient-name">李总监</div>
            <div class="recipient-time">15:32 领取</div>
          </div>
        </div>
        <div class="recipient-amount">¥66.66</div>
      </div>
      
      <div class="recipient-item">
        <div class="recipient-info">
          <img src="https://picsum.photos/100/100?random=12" alt="领取者头像" class="recipient-avatar">
          <div>
            <div class="recipient-name">王主管</div>
            <div class="recipient-time">15:33 领取</div>
          </div>
        </div>
        <div class="recipient-amount">¥52.30</div>
      </div>
      
      <div class="recipient-item">
        <div class="recipient-info">
          <img src="https://picsum.photos/100/100?random=13" alt="领取者头像" class="recipient-avatar">
          <div>
            <div class="recipient-name">赵同事</div>
            <div class="recipient-time">15:35 领取</div>
          </div>
        </div>
        <div class="recipient-amount">¥38.50</div>
      </div>
      
      <div class="recipient-item">
        <div class="recipient-info">
          <img src="https://picsum.photos/100/100?random=14" alt="领取者头像" class="recipient-avatar">
          <div>
            <div class="recipient-name">孙助理</div>
            <div class="recipient-time">15:36 领取</div>
          </div>
        </div>
        <div class="recipient-amount">¥29.12</div>
      </div>
    </div>
    
    <!-- 留言区 -->
    <div class="comments-section">
      <div class="comments-header">
        <div class="comments-title">红包留言</div>
        <div class="comments-count">18条留言</div>
      </div>
      
      <div class="comment-item">
        <div class="comment-header">
          <div class="comment-author">
            <img src="https://picsum.photos/100/100?random=20" alt="评论者头像" class="author-avatar">
            <span class="author-name">张经理</span>
          </div>
          <div class="comment-time">15:32</div>
        </div>
        <div class="comment-content">谢谢老板的红包！祝公司新的一年蒸蒸日上！</div>
        <div class="comment-actions">
          <div class="comment-action">
            <i class="fa fa-heart-o"></i> 12
          </div>
          <div class="comment-action reply-btn">
            <i class="fa fa-reply"></i> 回复
          </div>
        </div>
        
        <div class="replies">
          <div class="reply-item">
            <div class="reply-header">
              <div>
                <span class="reply-author">老板</span>
                <span class="reply-to"> 回复 张经理</span>
              </div>
              <div class="reply-time">15:35</div>
            </div>
            <div class="reply-content">谢谢大家的努力，新的一年一起加油！</div>
            <div class="comment-actions">
              <div class="comment-action">
                <i class="fa fa-heart-o"></i> 8
              </div>
              <div class="comment-action reply-btn">
                <i class="fa fa-reply"></i> 回复
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="comment-item">
        <div class="comment-header">
          <div class="comment-author">
            <img src="https://picsum.photos/100/100?random=21" alt="评论者头像" class="author-avatar">
            <span class="author-name">李总监</span>
          </div>
          <div class="comment-time">15:33</div>
        </div>
        <div class="comment-content">感谢老板的慷慨！新的一年一定更加努力工作！</div>
        <div class="comment-actions">
          <div class="comment-action">
            <i class="fa fa-heart-o"></i> 7
          </div>
          <div class="comment-action reply-btn">
            <i class="fa fa-reply"></i> 回复
          </div>
        </div>
      </div>
      
      <div class="comment-item">
        <div class="comment-header">
          <div class="comment-author">
            <img src="https://picsum.photos/100/100?random=22" alt="评论者头像" class="author-avatar">
            <span class="author-name">王同事</span>
          </div>
          <div class="comment-time">15:37</div>
        </div>
        <div class="comment-content">手气不错，谢谢老板！希望公司越来越好！</div>
        <div class="comment-actions">
          <div class="comment-action">
            <i class="fa fa-heart-o"></i> 5
          </div>
          <div class="comment-action reply-btn">
            <i class="fa fa-reply"></i> 回复
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 留言输入框 -->
  <div class="comment-input">
    <div class="input-actions">
      <div class="input-action">
        <i class="fa fa-smile-o"></i>
      </div>
      <div class="input-action">
        <i class="fa fa-picture-o"></i>
      </div>
    </div>
    <textarea class="comment-textarea" placeholder="发表你的看法..."></textarea>
    <button class="send-btn">发送</button>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 自动调整文本框高度
    const textarea = document.querySelector('.comment-textarea');
    textarea.addEventListener('input', function() {
      this.style.height = 'auto';
      // 限制最大高度为100px
      this.style.height = Math.min(this.scrollHeight, 100) + 'px';
    });
    
    // 红包领取功能
    const redpackDetail = document.querySelector('.redpack-detail');
    const amountValue = document.querySelector('.amount-value');
    
    redpackDetail.addEventListener('click', function(e) {
      if (this.classList.contains('unopened') && 
          (e.target.classList.contains('amount-value') || 
           e.target.closest('.redpack-amount'))) {
        
        // 生成随机金额
        const randomAmount = (Math.random() * 50 + 10).toFixed(2);
        
        // 更新红包状态为已领取
        this.classList.remove('unopened');
        this.classList.add('received-redpack');
        amountValue.innerHTML = `<span class="received-amount">¥${randomAmount}</span>`;
        
        // 更新红包信息
        document.querySelector('.amount-desc').textContent = '已领取 · 感谢您的参与';
        
        // 显示领取成功提示
        alert(`恭喜！您领取了¥${randomAmount}的红包`);
        
        // 更新领取进度
        const progressBar = document.querySelector('.progress-bar');
        const currentWidth = parseInt(progressBar.style.width);
        progressBar.style.width = (currentWidth + 5) + '%';
        
        document.querySelector('.status-stats .stat-item:first-child .stat-value').textContent = '13/20';
        document.querySelector('.status-text').textContent = '剩余7个红包 · 2小时后过期';
        
        // 添加到领取列表顶部
        const recipientsList = document.querySelector('.recipients-list');
        const newRecipient = document.createElement('div');
        newRecipient.className = 'recipient-item';
        newRecipient.innerHTML = `
          <div class="recipient-info">
            <img src="https://picsum.photos/100/100?random=99" alt="你的头像" class="recipient-avatar">
            <div>
              <div class="recipient-name">我</div>
              <div class="recipient-time">刚刚 领取</div>
            </div>
          </div>
          <div class="recipient-amount">¥${randomAmount}</div>
        `;
        recipientsList.insertBefore(newRecipient, recipientsList.children[1]);
      }
    });
    
    // 留言发送功能
    const sendBtn = document.querySelector('.send-btn');
    sendBtn.addEventListener('click', function() {
      const commentText = textarea.value.trim();
      if (commentText) {
        // 创建新留言
        const commentsSection = document.querySelector('.comments-section');
        const newComment = document.createElement('div');
        newComment.className = 'comment-item';
        newComment.innerHTML = `
          <div class="comment-header">
            <div class="comment-author">
              <img src="https://picsum.photos/100/100?random=99" alt="你的头像" class="author-avatar">
              <span class="author-name">我</span>
            </div>
            <div class="comment-time">刚刚</div>
          </div>
          <div class="comment-content">${commentText}</div>
          <div class="comment-actions">
            <div class="comment-action">
              <i class="fa fa-heart-o"></i> 0
            </div>
            <div class="comment-action reply-btn">
              <i class="fa fa-reply"></i> 回复
            </div>
          </div>
        `;
        
        // 添加到留言区顶部
        const firstComment = commentsSection.querySelector('.comment-item');
        commentsSection.insertBefore(newComment, firstComment);
        
        // 更新留言计数
        const countElement = document.querySelector('.comments-count');
        const currentCount = parseInt(countElement.textContent);
        countElement.textContent = (currentCount + 1) + '条留言';
        
        // 清空输入框
        textarea.value = '';
        textarea.style.height = '38px';
        
        // 显示成功提示
        alert('留言成功');
      }
    });
    
    // 回复功能
    document.addEventListener('click', function(e) {
      if (e.target.closest('.reply-btn')) {
        const replyBtn = e.target.closest('.reply-btn');
        const authorName = replyBtn.closest('.comment-item, .reply-item').querySelector('.author-name, .reply-author').textContent;
        
        textarea.value = `回复 @${authorName}：`;
        textarea.focus();
        textarea.style.height = 'auto';
        textarea.style.height = Math.min(textarea.scrollHeight, 100) + 'px';
      }
    });
    
    // 点赞功能
    document.addEventListener('click', function(e) {
      if (e.target.closest('.comment-action') && e.target.closest('.comment-action').querySelector('.fa-heart-o, .fa-heart')) {
        const likeBtn = e.target.closest('.comment-action');
        const icon = likeBtn.querySelector('i');
        const countText = likeBtn.childNodes[2].textContent.trim();
        let count = parseInt(countText);
        
        if (icon.classList.contains('fa-heart-o')) {
          icon.classList.remove('fa-heart-o');
          icon.classList.add('fa-heart');
          likeBtn.style.color = 'var(--red-primary)';
          likeBtn.childNodes[2].textContent = ' ' + (count + 1);
        } else {
          icon.classList.remove('fa-heart');
          icon.classList.add('fa-heart-o');
          likeBtn.style.color = '';
          likeBtn.childNodes[2].textContent = ' ' + (count - 1);
        }
      }
    });
    
    // 排序功能
    const sortBtn = document.querySelector('.sort-btn');
    let sortAsc = false;
    
    sortBtn.addEventListener('click', function() {
      sortAsc = !sortAsc;
      const icon = this.querySelector('i');
      if (sortAsc) {
        icon.classList.remove('fa-chevron-down');
        icon.classList.add('fa-chevron-up');
        this.querySelector('span').textContent = '金额从低到高';
      } else {
        icon.classList.remove('fa-chevron-up');
        icon.classList.add('fa-chevron-down');
        this.querySelector('span').textContent = '金额从高到低';
      }
      
      // 这里可以添加实际的排序逻辑
      alert(`已按${sortAsc ? '从低到高' : '从高到低'}排序`);
    });
  </script>
</body>
</html>
